import React from 'react'
import type { FC, ReactNode } from 'react'
import styled from 'styled-components'
import { Viewer } from '@bytemd/react'
import './flow.css'

import { useMySelector, MyShallEqual } from '../../store'

// 实现解析gfm语法
import gfm from '@bytemd/plugin-gfm'

// 实现代码高亮
import highlight from '@bytemd/plugin-highlight'
import 'highlight.js/styles/monokai-sublime.css'

// 实现解析前辅文
import frontmatter from '@bytemd/plugin-frontmatter'

// 实现解析数学公式
import math from '@bytemd/plugin-math'

// 实现解析流程图
import mermaid from '@bytemd/plugin-mermaid'

// 实现解析Gemoji表情
import gemoji from '@bytemd/plugin-gemoji'

import 'bytemd/dist/index.css'
import './index.scss'

const Wrap = styled.div`
  height: 180px;
  overflow: auto;
  padding: 0 15px;
`

const plugins = [gfm(), highlight(), frontmatter(), math(), mermaid(), gemoji()]

interface IProps {
  children?: ReactNode
}

const MarkDownViewer: FC<IProps> = () => {
  const { mdContent } = useMySelector(
    (state) => ({
      mdContent: state.success.mdContent
    }),
    MyShallEqual
  )

  return (
    <Wrap>
      <Viewer value={mdContent} plugins={plugins} />
    </Wrap>
  )
}

export default MarkDownViewer
